<template>
  <div>
    <van-loading v-if="loading && index<2" size="24px" vertical>加载中...</van-loading>
    <van-pull-refresh v-else v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <section>
        <h3>精选歌单</h3>
        <section class="yM-fS">
          <ul class="yM-fS-list">
            <router-link
              tag="li"
              :to="{path:'/songSheetList',query:{specialid:item.specialid}}"
              class="yM-list-item"
              v-for="item in musicList"
              :key="item.specialid"
            >
              <img :src="item.imgurl | setWH(480)" alt />
              <p>{{item.specialname.length >=6 ? item.specialname.slice(0,4) + '...' : item.specialname}}</p>
            </router-link>
          </ul>
        </section>
      </section>
      <section>
        <h3>歌手分类</h3>
        <section class="yM-fS">
          <ul class="yM-fS-list">
            <router-link
              tag="li"
              :to="{path:'/singerList',query:{classid:item.classid,classname:item.classname}}"
              class="yM-list-item"
              v-for="item in singerClassification"
              :key="item.classid"
            >
              <img :src="item.imgurl | setWH(480)" alt />
              <p>{{ item.classname }}</p>
            </router-link>
          </ul>
        </section>
      </section>
    </van-pull-refresh>

    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>
// document.addEventListener(
//   'touchmove',
//   function(event) {
//     // 判断默认行为是否可以被禁用
//     if (event.cancelable) {
//       // 判断默认行为是否已经被禁用
//       if (!event.defaultPrevented) {
//         event.preventDefault()
//       }
//     }
//   },
//   false
// )
// document.addEventListener(
//   'touchend',
//   function(event) {
//     // 判断默认行为是否可以被禁用
//     if (event.cancelable) {
//       // 判断默认行为是否已经被禁用
//       if (!event.defaultPrevented) {
//         event.preventDefault()
//       }
//     }
//   },
//   false
// )
export default {
  name: 'Find',
  data() {
    return {
      musicList: [],
      singerClassification: [],
      isLoading: false,
      loading: true,
      index: 0
    }
  },
  created: function() {
    this.getMusicList()
    this.getSingerClassification()
  },
  methods: {
    getMusicList: async function() {
      this.index++
      this.loading = true
      const { data: res } = await this.axios.get('/api/plist/')
      if (res.code === 200) {
        this.musicList = res.data.list.info
        // console.log(this.musicList)
      }
    },
    getSingerClassification: async function() {
      const { data: res } = await this.axios.get('/api/singer_classify/')
      // console.log(res.data)
      if (res.code === 200) {
        this.singerClassification = res.data
      }
      this.loading = false
    },
    onRefresh() {
      setTimeout(() => {
        this.getMusicList()
        this.getSingerClassification()
        this.$toast('刷新成功')
        this.isLoading = false
      }, 1000)
    }
  }
}
</script>
<style scoped lang="less">
section {
  h3 {
    padding-left: 20px;
  }
  .yM-fS {
    overflow-x: auto;
    overflow-y: hidden;
    .yM-fS-list {
      white-space: nowrap;
      margin: 0 20px;
      .yM-list-item {
        width: 200px;
        display: inline-block;
        margin-right: 20px;
        text-align: center;
        img {
          width: 200px;
          height: 200px;
          vertical-align: top;
          border-radius: 20px;
        }
        p {
          text-align: center;
        }
      }
    }
  }
}
</style>